<template>
	<view>
		<!-- 讲循环时得block 组件 修改view 组件 ，并绑定click 点击事件处理函数 -->
		<view v-for="(goods,i) in goodsList" :key="i" @click="gotoDetail(goods)">
			<!--  复用商品组件 goodsList-->
			<my-goods :goods="goods"></my-goods>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 // 请求参数对象
				    queryObj: {
				      // 查询关键词
				      query: '',
				      // 商品分类Id
				      cid: '',
				      // 页码值
				      pagenum: 1,
				      // 每页显示多少条数据
				      pagesize: 10
				    },
					// 商品列表的数据
					goodsList:[],
					// 总数量，用来实现分页
					total:0,
					// 制造节流阀只有当且仅当 当前去请求完成才进行下一次请求
					isLoading:false
			};
		},
		onLoad(options) {
			console.log(options);
		  // 将页面参数转存到 this.queryObj 对象中
		  this.queryObj.query = options.query || ''
		  this.queryObj.cid = options.cid || '',
		  
		  // 调用获取商品列表数据的方法
		  this.getGoodsList()
		  
		},
		methods:{
			async getGoodsList(cb){
				// 请求的时候打开节流阀
				this.isLoading=true
				const {data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
				// 请求结束  关闭节流阀
				this.isLoading=false
				cb&& cb()
				// console.log(res);
				if(res.meta.status!==200) return uni.$showMag()
				// 商品列表数据
				// this.goodsList=res.message.goods
				this.goodsList=[...this.goodsList,...res.message.goods]
				// 数据总条数
				this.total =res.message.total
			},
			gotoDetail(goods){
					uni.navigateTo({
						url: '/subpkg/goods_detail/goods_detail?goods_id=' + goods.goods_id
					})
			}
		},
		// 下拉触底功能的开启需要在  pages.json 中声明
		onReachBottom(){
			// 判断请求的服务器是否还有数据
			  if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg("数据加载完毕")
			
			
			// 页码加以之前查看当前是否有请求进行
			if(this.isLoading) return			
			// 让请求的页码加1
			this.queryObj.pagenum+=1
			// 再重新获取数据列表 且重新获取数据的列表  与旧数据拼接在一起  让其 新旧数据拼接在一块
			this.getGoodsList()
		},
		onPullDownRefresh() {
			// 重置关键数据
			this.queryObj.pagenum=1
			this.total=0
			this.isLoading=false
			this.goodsList=[]
			
			// 重新发起数据请求
			this.getGoodsList(()=>uni.stopPullDownRefresh())
		}
		
	}
</script>

<style lang="scss">

</style>
